<template>
	<view>
		<view class="uploadMainImg" @tap="uploadSingleImg" :style="{'border-radius':radius + 'rpx'}">
			<image class="mainHeadImg samePar" :src="singleSrc" :mode="imgMod" :style="{'border-radius':radius + 'rpx'}"></image>
			<!-- <image class="mainHeadImg" :src="mainImg" mode="aspectFill"></image> -->
			<!-- <i class="iconfont icon-xiangji"></i> -->
		</view>
		<!-- <view style="margin-top: 100rpx;">
			<progress :percent="percent" stroke-width="10" :show-info="true" duration="500"  active-mode="forwards"></progress> //进度条=={{percent}}。
		</view> -->
		
	</view>
</template>

<script>
	var sourceType = '';
	export default {
		props:{
			needUpFlag:{
				type:Boolean,
				default:true
			},
			pathName:{
				type:String,
				default:'image'
			},
			radius:{
				type:Number,
				default:0
			},
			imgMod:{
				type:String,
				default:'aspectFill'
			},
			mainImg : {
				type : String
			},
			isDisabledFlag : {
				type:Boolean
			},
			clickOpt:{
				type:String,
				default:''
			},
			currType:{//add->增加 '' 编辑时edit 将mainImgEdit给singleSrc
				type:String,
				default:''
			},
			mainImgEdit:{//编辑时候使用
				type:String,
				default:''
			},
			relativePathTag:{//是否截取云存储上的前缀路径
				type:Number,
				default:1
			},
			needSingleSrc:{//上传时是否需要将选择图片的临时src给与组件的imgSrc
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				singleSrc : '',
				succSrc : '',
				percent:0
			}
		},
		mounted(){
			//创建时将父组件的image src付给子组件singleSrc
			if(this.currType == ''){
				this.singleSrc = this.mainImg;
			}else if(this.currType == 'edit'){//编辑的时候回显将服务器返回的url给singleSrc
				this.singleSrc = this.mainImgEdit;
			}
		},
		methods: {
			uploadSingleImg(){
				this.selectUploadType();
				//this.$emit('uploadSingleImg',{succSrc:this.succSrc})
			},
			selectUploadType : function(){
				var that = this;
				uni.showActionSheet({
					title:'请选择图片',
					itemList: ['从手机相册选择', '拍照'],
					success: function(res) {
						if(res.tapIndex == 0){
							sourceType = 'album';
						}else if(res.tapIndex == 1){
							sourceType = 'camera';
						}
						that.upLoadSingleImg(sourceType);
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				});
			},
			upLoadSingleImg(sourceType){
				var that = this,chooseImgSrc='';
				uni.chooseImage({
					count:1,
					sizeType: ['original'], 
					sourceType: [sourceType],// 可以指定来源是相册还是相机，默认二者都有
					success: (res)=>{
						var url = that.serverUrl + '/cosFile/cosUpload';
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;  
						const imgSize = res.tempFiles[0] && res.tempFiles[0].size ? res.tempFiles[0].size : 0;
						chooseImgSrc = tempFilePaths[0];
						if(!this.needUpFlag){//去截取
							that.$emit('uploadSingleImg',{succSrc:chooseImgSrc,clickOpt:this.clickOpt})
						}
						if(this.needUpFlag){
							uni.showLoading({
								title: '正在上传...',
								icon: 'loading',
								mask: true
							}) 
							var field = {pathName:this.pathName,relativePathTag:this.relativePathTag};
							if(this.needSingleSrc){
								this.singleSrc = tempFilePaths[0];
							}
							this.$emit('upImgIng');
							const uploadTask = uni.uploadFile({
								url: url,
								filePath: chooseImgSrc,
								header:{
									'Content-Type':'application/json;charset=UTF-8',
									'Content-Type':'application/x-www-form-urlencoded',
									'token':uni.getStorageSync('token')
								},
								name: 'file', 
								formData:field,
								success:function(res1){
									uni.hideLoading(); 
									if(JSON.parse(res1.data).code == 200){
										that.succSrc = JSON.parse(res1.data).datas.filePath;
										that.$emit('uploadSingleImg',{succSrc:that.succSrc,clickOpt:that.clickOpt})
									}else if(JSON.parse(res1.data).code == 1000){
										uni.showToast({
											title : '服务器错误',
											icon : 'none'
										});
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.uploadMainImg{
		/* width: 210rpx;
		height: 210rpx; */
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 5;
		/* border:1rpx solid #E8E8E8; */
		/* position:relative; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.uploadMainImg i{
		font-size: 70rpx;	
		color: #e8e8e8;
	}
	.mainHeadImg{ 
		/* width: 212rpx;
		height: 212rpx;
		position: absolute;
		left: 0;
		top: 0; */
		z-index: 2;
	}
</style>
